import { Menu, Icon, Input } from 'ant-design-vue'

const { Item, ItemGroup, SubMenu } = Menu
const { Search } = Input

export default {
    name: 'Tree',
    props: {
        dataSource: {
            type: Array,
            required: true
        },
        openKeys: {
            type: Array,
            default: () => []
        },
        search: {
            type: Boolean,
            default: false
        }
    },
    created() {
        this.localOpenKeys = this.openKeys.slice(0)
    },
    data() {
        return {
            localOpenKeys: []
        }
    },
    methods: {
        handlePlus(item) {
            this.$emit('add', item)
        },
        handleTitleClick(...args) {
            this.$emit('titleClick', { args })
        },

        renderSearch() {
            return <Search placeholder="input search text" style="width: 100%; margin-bottom: 1rem" />
        },
        renderIcon(icon) {
            return (icon && <Icon type={icon} />) || null
        },
        renderMenuItem(item) {
            return (
                <Item key={item.key}>
                    {this.renderIcon(item.icon)}
                    {item.title}
                    <a class="btn" style="width: 20px;z-index:1300" {...{ on: { click: () => this.handlePlus(item) } }}>
                        <a-icon type="plus" />
                    </a>
                </Item>
            )
        },
        renderItem(item) {
            return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key)
        },
        renderItemGroup(item) {
            const childrenItems = item.children.map(o => {
                return this.renderItem(o, o.key)
            })

            return (
                <ItemGroup key={item.key}>
                    <template slot="title">
                        <span>{item.title}</span>
                        <a-dropdown>
                            <a class="btn">
                                <a-icon type="ellipsis" />
                            </a>
                            <a-menu slot="overlay">
                                <a-menu-item key="1">新增</a-menu-item>
                                <a-menu-item key="2">合并</a-menu-item>
                                <a-menu-item key="3">移除</a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </template>
                    {childrenItems}
                </ItemGroup>
            )
        },
        renderSubItem(item, key) {
            const childrenItems =
                item.children &&
                item.children.map(o => {
                    return this.renderItem(o, o.key)
                })

            const title = (
                <span slot="title">
                    {this.renderIcon(item.icon)}
                    <span>{item.title}</span>
                </span>
            )

            if (item.group) {
                return this.renderItemGroup(item)
            }
            // titleClick={this.handleTitleClick(item)}
            return (
                <SubMenu key={key}>
                    {title}
                    {childrenItems}
                </SubMenu>
            )
        }
    },
    render() {
        const { dataSource, search } = this.$props

        // this.localOpenKeys = openKeys.slice(0)
        const list = dataSource.map(item => {
            return this.renderItem(item)
        })

        return (
            <div class="tree-wrapper">
                {search ? this.renderSearch() : null}
                <Menu
                    mode="inline"
                    class="custom-tree"
                    {...{
                        on: {
                            click: item => this.$emit('click', item),
                            'update:openKeys': val => {
                                this.localOpenKeys = val
                            }
                        }
                    }}
                    openKeys={this.localOpenKeys}
                >
                    {list}
                </Menu>
            </div>
        )
    }
}
